<template>
  <div  v-if="bannerList.length>0" style="margin-top: 50px; margin-bottom: 50px">
    <el-carousel :interval="4000" type="card">
      <el-carousel-item v-for='banner in bannerList' :key='banner.id'>
        <a :href="banner.imageUrl" target="_blank">
          <img
            :src="banner.imageUrl"
            style="position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;margin:auto;"
            :alt="banner.imageUrl"
            :title="banner.title"
          />
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div v-else>
    <h1 style="text-align: center">暂无轮播图，请添加后查看</h1>
  </div>
</template>


<script>
import banner from '@/api/banner'

export default {
  data() {
    return {
      bannerList: [],
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    }
  },
  created() {
    this.getIndexBannerList()
  },
  methods: {
    getIndexBannerList() {
      banner.getIndexBannerList()
        .then(response => {
          console.log("===========获取全部轮播图=========")
          console.log(response.data)
          this.bannerList = response.data.list
          console.log(this.bannerList[0])
          console.log(this.bannerList[0].imageUrl)
        })
    }

  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
